
import React, { Component, createContext } from 'react'
import { getlist, add } from '../api/data'
import './index.css'
const { Provider, Consumer } = createContext([])
export class App extends Component {
  state = {
    data: [],
    curindex: ""

  }
  componentDidMount() {
    getlist(Math.random() * 50).then(res => {
      this.setState(() => {
        return {
          data: res
        }
      })

    })
  }
  getdata = (b) => {

    this.setState(() => {
      return {
        curindex: b
      }
    })

  }
  render() {
    return (
      <div className="App">
        {this.state.curindex}
        {console.log(this.state.curindex,'ll add ')}
        <Provider value={{ data: this.state.data, getdata: this.getdata }} >
          <App1 />
        </Provider>



      </div>
    )
  }
}

export default App


export class App1 extends Component {
  render() {

    return (
      <div className="app1">
        <App2></App2>

      </div >
    )
  }
}

export class App2 extends Component {
  state = {
    a: 0
  }
  getD = (b, a) => {
    this.setState(() => {
      return {
        a: b
      }
    })
  }

  render() {
    const { a } = this.state
    return (
      <div className="app2">

        <App3 ></App3>
      </div>
    )
  }
}
export class App3 extends Component {

  render() {
   return <Consumer>
      {
        (value) => {
          console.log(value,'valuevvvv')
          return (
            <div className="app3">
              <App4 />
            </div>
          )
        }

      }
    </Consumer>
 

  }

}

export class App4 extends Component {
  state = {
    a: 0
  }
  getD = (b, a) => {
    this.setState(() => {
      return {
        a: b
      }
    })
  }

  render() {
    const { a } = this.state
    return (
      <div className="app4" >
        <Consumer>
          {(value) => (

            [...value.data].map((i, b) => {
              return <div className={b === a ? 'ac' : 'sc'} onClick={() => {
                this.getD(b, a)
                value.getdata(b)
              }}>
                {i}
              </div>
            })

          )
          }
        </Consumer>

      </div>
    )
  }
}




